<template>
    <view class="video-container">
        <!-- 视频播放器 -->
        <video
            v-if="!isEmpty(videoSrc)"
            id="videoPlayer"
            :src="videoSrc"
            :poster="poster"
            class="video-player"
            :autoplay="true"
            :show-fullscreen-btn="false"
            :controls="false"
            direction="0"
            objectFit="contain"
            @fullscreenchange="onFullscreenChange"
            @ended="onVideoEnded"
            @loadedmetadata="onVideoLoaded"
            @play="onVideoPlay"
        ></video>

        <!-- 播放完毕提示弹窗 -->
        <uni-popup ref="trainingTip" type="center" :mask-click="false">
            <view class="training-tip">
                <view class="tip-content">
                    <!-- 成功图标背景 -->
                    <view class="success-icon-wrapper">
                        <view class="success-icon-bg">
                            <uni-icons type="checkmarkempty" color="#fff" size="50"></uni-icons>
                        </view>
                        <!-- 成功动画圆环 -->
                        <view class="success-ring"></view>
                    </view>

                    <!-- 标题区域 -->
                    <view class="tip-header">
                        <text class="tip-title">🎉 恭喜完成！</text>
                        <text class="tip-subtitle">视频学习已完成</text>
                    </view>

                    <!-- 倒计时区域 -->
                    <view class="countdown-section">
                        <view class="countdown-circle">
                            <text class="countdown-number">{{ countdown }}</text>
                        </view>
                        <text class="countdown-label">秒后自动返回</text>
                    </view>

                    <!-- 装饰元素 -->
                    <view class="decoration-dots">
                        <view class="dot dot-1"></view>
                        <view class="dot dot-2"></view>
                        <view class="dot dot-3"></view>
                    </view>
                </view>
            </view>
        </uni-popup>

        <!-- 加载中状态 -->
        <view v-if="loading" class="loading-overlay">
            <uni-icons type="spinner-cycle" color="#3b82f6" size="40"></uni-icons>
            <text class="loading-text">视频加载中...</text>
        </view>
    </view>
</template>

<script>
import { getVideoInfo } from '@/api/modules/common.js';
import _ from 'lodash';
export default {
    data() {
        return {
            videoSrc: '',
            poster: '',
            loading: true,
            countdown: 3,
            countdownTimer: null,
            isFullscreen: false,
            hasEnteredFullscreen: false, // 标记是否已经成功进入过全屏
            canAutoReturn: false // 标记是否允许自动返回
        };
    },
    onLoad(options) {
        this.getVideoInfo(options);
    },
    onUnload() {
        // 清理定时器
        if (this.countdownTimer) {
            clearInterval(this.countdownTimer);
        }
    },
    methods: {
        isEmpty(e) {
            return _.isEmpty(e);
        },
        async getVideoInfo(e) {
            const { data } = await getVideoInfo(e);
            this.videoSrc = data.video_url;
            this.poster = data.poster;
        },
        onVideoPlay() {
            // 取消自动进入全屏播放
            console.log('视频开始播放');
        },
        // 进入全屏
        enterFullscreen() {
            const videoContext = uni.createVideoContext('videoPlayer', this);
            if (videoContext && videoContext.requestFullScreen) {
                videoContext.requestFullScreen({
                    direction: 0 // 0: 正常竖向, 90: 屏幕逆时针90度, -90: 屏幕顺时针90度
                });
                this.isFullscreen = true;
            }
        },

        // 全屏状态改变
        onFullscreenChange(e) {
            this.isFullscreen = e.detail.fullScreen;
            console.log('全屏状态改变:', e.detail.fullScreen ? '进入全屏' : '退出全屏');
        },

        // 视频播放完毕
        onVideoEnded() {
            // 显示提示弹窗
            this.$refs.trainingTip.open();

            // 开始倒计时
            this.startCountdown();
        },

        // 视频加载完成
        onVideoLoaded() {
            this.loading = false;
        },

        // 开始倒计时
        startCountdown() {
            this.countdownTimer = setInterval(() => {
                this.countdown--;

                if (this.countdown <= 0) {
                    clearInterval(this.countdownTimer);
                    this.goBack();
                }
            }, 1000);
        },

        // 返回上一页
        goBack() {
            // 如果还在全屏状态，先退出全屏
            if (this.isFullscreen) {
                const videoContext = uni.createVideoContext('videoPlayer', this);
                if (videoContext && videoContext.exitFullScreen) {
                    videoContext.exitFullScreen();
                }
            }

            // 返回上一页
            uni.navigateBack({
                fail: () => {
                    // 如果无法返回，跳转到首页
                    uni.switchTab({
                        url: '/pages/index/index'
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss">
.video-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-player {
    width: 100%;
    height: 100%;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.loading-text {
    color: #fff;
    font-size: 28rpx;
    margin-top: 20rpx;
}

.training-tip {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 30rpx;
    padding: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    width: 80vw;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 100%
        );
        backdrop-filter: blur(10px);
    }
}

.tip-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60rpx 40rpx;
}

.success-icon-wrapper {
    position: relative;
    margin-bottom: 40rpx;

    .success-icon-bg {
        width: 120rpx;
        height: 120rpx;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
        animation: iconPulse 2s infinite;
    }

    .success-ring {
        position: absolute;
        top: -15rpx;
        left: -15rpx;
        width: 150rpx;
        height: 150rpx;
        border: 4rpx solid rgba(16, 185, 129, 0.3);
        border-radius: 50%;
        animation: ringExpand 2s infinite;
    }
}

@keyframes iconPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes ringExpand {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.1;
    }
}

.tip-header {
    margin-bottom: 40rpx;

    .tip-title {
        display: block;
        font-size: 42rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 15rpx;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .tip-subtitle {
        display: block;
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.5;
        max-width: 400rpx;
    }
}

.countdown-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;

    .countdown-circle {
        width: 100rpx;
        height: 100rpx;
        background: rgba(255, 255, 255, 0.2);
        border: 3rpx solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(10px);
        animation: countdownPulse 1s infinite;

        .countdown-number {
            font-size: 48rpx;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
    }

    .countdown-label {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
    }
}

@keyframes countdownPulse {
    0%,
    100% {
        transform: scale(1);
        border-color: rgba(255, 255, 255, 0.3);
    }
    50% {
        transform: scale(1.05);
        border-color: rgba(255, 255, 255, 0.6);
    }
}

.decoration-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;

    .dot {
        position: absolute;
        width: 12rpx;
        height: 12rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        animation: dotFloat 3s infinite ease-in-out;

        &.dot-1 {
            top: 20%;
            left: 15%;
            animation-delay: 0s;
        }

        &.dot-2 {
            top: 30%;
            right: 20%;
            animation-delay: 1s;
        }

        &.dot-3 {
            bottom: 25%;
            left: 20%;
            animation-delay: 2s;
        }
    }
}

@keyframes dotFloat {
    0%,
    100% {
        transform: translateY(0px) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-10px) scale(1.2);
        opacity: 0.4;
    }
}
</style>
